<template>
	<s-layout :tabbarshow="false" navbar="normal" :title="'测试页面'" :autoBack="true" leftIconColor="#ffffff">
		<view class="box">
			<fui-autograph ref="autograph" :height="1000" @ready="ready"></fui-autograph>
		</view>		
		<button @tap="redraw">清除</button>
		<button @tap="complete">完成</button>
	</s-layout>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';

	const canvasId = ref('');
	const src = ref('');
	const autograph = ref()

	const ready = (e) => {
		canvasId.value = e.canvasId;
	};

	// 重新签名
	const redraw = () => {
		if (!canvasId.value) return;
		src.value = '';
		autograph.value.redraw();
	};

	const complete = () => {
		if (!canvasId.value || src.value) return;
		autograph.value.drawComplete((res) => {
			src.value = res;
			console.log('res',res);
		});
		console.log('src',src.value);
		console.log('id',canvasId.value);
	};

</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	height: 100vh;
}

.fui-title {
	width: 100%;
	height: 72rpx;
	background: #e1e1e1;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}
</style>
